import React, { useState } from 'react';
import Head from 'next/head'
import { Row, Col, List } from 'antd'
import { CalendarOutlined, FireOutlined, FolderOutlined } from '@ant-design/icons'
import '../public/style/pages/index.css'
import Author from '../components/Author'
import Advert from '../components/Advert'
import Footer from '../components/Footer'
import axios from 'axios'
import Link from 'next/link'
import servicePath from '../config/apiUrl'
import Header from '../components/Header'
import marked from 'marked'
import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'

const Home = (list) => {
  const [mylist, setMylist] = useState(list.data)
  const total = mylist.length

  const renderer = new marked.Renderer()

  marked.setOptions({
    renderer: renderer,
    gfm: true,
    pedantic: false,
    sanitize: false,
    tables: true,
    breaks: false,
    smartLists: true,
    highlights:function(code) {
      return hljs.highlightAuto(code).value
    }
  })

  return (
    <div className="container">
      <Head>
        <title>博客首页</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" key="viewport" />
        <link rel="icon" type="image/png/jpg" href="image/avatar.jpg" sizes="96*96"></link>
      </Head>
      <Header />
      
      <Row className="comm-main" type="flex" justify="center">
        <Col className="comm-left" xs={24} sm={24} md={16} lg={14} xl={12}>
          <List 
            header={<div>博客日志 <span style={{color:'red'}}>{total}</span> 篇</div>}
            itemLayout="vertical"
            dataSource={mylist}
            renderItem={(item) => {
              return (
                <List.Item>
                  <div className="list-title">
                    <Link href={{pathname:'/detailed',query:{id: item.id}}}>
                      <a>{item.title}</a>
                    </Link>
                  </div>
                  <div className='list-icon'>
                    <span>
                      <CalendarOutlined />
                      &nbsp; {item.addTime}
                    </span>
                    <span>
                      <FolderOutlined />
                      &nbsp; {item.typeName}
                    </span>
                    <span>
                      <FireOutlined />
                      &nbsp; {item.view_count}人
                    </span>
                  </div>
                  <div className="list-context"
                    dangerouslySetInnerHTML={{__html:marked(item.introduce)}}
                  ></div>
                </List.Item>
              )
            }}
          />
        </Col>
        <Col className="comm-right" xs={0} sm={0} md={8} lg={4} xl={4}>
          <Author />
          <Advert total={total} />
        </Col>
      </Row>
      
      <Footer />
    </div>
  )
}

Home.getInitialProps = async () => {
  const promise = new Promise((resolve) => {
    axios(servicePath.getArticleList)
      .then(res => {
        // console.log(res.data.data)
        // console.log(Date.now())
        resolve(res.data)
      })
  })
  return await promise
}

export default Home
